<script setup>
	import {
		ref,
		reactive,
		onMounted,
	} from "vue"
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"

	// 轮播
	const swiperList = ref([
		'https://cdn.uviewui.com/uview/swiper/swiper1.png',
		'https://cdn.uviewui.com/uview/swiper/swiper2.png',
		'https://cdn.uviewui.com/uview/swiper/swiper3.png',
	]);

	// 通知
	let noticeData = ['哈哈跑题，您的快乐考公助手！']

	// 刷题|考试
	const customStyle = ref({
		width: '220rpx',
		height: '220rpx',
		fontSize: '100rpx',
		border: '10rpx solid #fff',
	})

	// 左侧菜单
	const leftMenu = reactive([{
		label: '行测指南',
		value: 1,
		icon: '/static/icons/shuati.png',
		path: '/learnPages/administrative/index'
	}, {
		label: '申论指南',
		value: 2,
		icon: '/static/icons/shuati.png',
		path: '/learnPages/essay/index'
	}, {
		label: '我的笔记',
		value: 3,
		icon: '/static/icons/shuati.png',
		path: ''
	}, {
		label: '我的收藏',
		value: 4,
		icon: '/static/icons/shuati.png',
		path: ''
	}])

	// 右侧菜单
	const rightMenu = reactive([{
		label: '随机刷题',
		value: 5,
		icon: '/static/icons/shuati.png',
		path: ''
	}, {
		label: '专项刷题',
		value: 6,
		icon: '/static/icons/shuati.png',
		path: ''
	}, {
		label: '章节练习',
		value: 7,
		icon: '/static/icons/shuati.png',
		path: ''
	}, {
		label: '我的错题',
		value: 8,
		icon: '/static/icons/shuati.png',
		path: ''
	}])

	const handleMenu = (item) => {
		uni.navigateTo({
			url: item.path
		})
	}

	// 刷题
	const onBrush = () => {
		uni.navigateTo({
			url: "/answerPages/brush/index"
		})
	}
	// 考试
	const onExam = () => {
		uni.navigateTo({
			url: "/answerPages/exam/index"
		})
	}

	onLoad(() => {
		console.log('onLoad');
	})

	onShow(() => {
		console.log('onShow');
	})

	onMounted(() => {
		console.log('onMounted');
	})
</script>

<template>
	<view class="u-p-l-20 u-p-r-20 container">
		<!-- 轮播 -->
		<up-swiper :list="swiperList"></up-swiper>
		<u-gap height="20"></u-gap>

		<!-- 消息通知 -->
		<up-notice-bar :text="noticeData" direction="column" bgColor="rgba(100, 163, 247, 0.3)"
			color="#64A3F7"></up-notice-bar>
		<u-gap height="20"></u-gap>

		<!-- 菜单 -->
		<view class="u-flex u-flex-items-center u-flex-around menu-box">
			<view class="u-flex u-flex-column u-flex-center u-flex-between l-box">
				<template v-for="item in leftMenu" :key="item.value">
					<view class="u-flex u-flex-column u-flex-items-center" @click.stop="handleMenu(item)">
						<up-icon :name="item.icon" :size="46" color="#1296db"></up-icon>
						<text class="u-m-t-10">{{item.label}}</text>
					</view>
					<u-gap height="30" v-if="item.value !== 4"></u-gap>
				</template>
			</view>

			<view class="c-box">
				<up-button type="primary" text="在线刷题" shape="circle" throttleTime="1500" :customStyle="customStyle"
					color="linear-gradient(to right, #6dd5ed, #2193b0)" @click.stop="onBrush"></up-button>

				<u-gap height="60"></u-gap>
				<up-button type="primary" text="模拟考试" shape="circle" throttleTime="1500" :customStyle="customStyle"
					color="linear-gradient(to right, #6DD5FA, #2980B9)" @click.stop="onExam"></up-button>
			</view>

			<view class="u-flex u-flex-column u-flex-center r-box">
				<template v-for="item in rightMenu" :key="item.value">
					<view class="u-flex u-flex-column u-flex-items-center" @click.stop="handleMenu(item)">
						<up-icon :name="item.icon" :size="46" color="#1296db"></up-icon>
						<text class="u-m-t-10">{{item.label}}</text>
					</view>
					<u-gap height="30" v-if="item.value !== 8"></u-gap>
				</template>
			</view>
		</view>

		<u-gap height="30"></u-gap>
	</view>
</template>

<style lang="scss">
	.menu-box {
		padding: 40rpx 20rpx;

		background: rgba(#6190E8, .3);
		background: -webkit-linear-gradient(to top, rgba(#FFFFFF, .3), rgba(#A7BFE8, .3), rgba(#6190E8, .3));
		background: linear-gradient(to top, rgba(#FFFFFF, .3), rgba(#A7BFE8, .3), rgba(#6190E8, .3));

		box-shadow: 0 0 10px 5px rgba(#A7BFE8, .3);


		border-radius: 20rpx;

		.l-box,
		.r-box {
			font-family: PingFang SC;
			font-size: 24rpx;
			font-weight: normal;
			line-height: normal;
			text-align: center;
			letter-spacing: 0;

			font-variation-settings: "opsz" auto;
			color: #2C2C2C;
		}

	}
</style>